import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { get } from 'lodash';
import { Menu } from 'antd';
import { Icon } from 'antd';
const SubMenu = Menu.SubMenu;
import './sidebar.css'

@connect(
  state => ({
    router: get(state, 'routing.locationBeforeTransitions'),
  })
)
export default class Sidebar extends Component {

  render() {
    const {
      router
    } = this.props;

    return (
      <div className="sidebar">
        <div className="padding-md text-left selectness">
          <h1 className="sidebar-title"><Icon type="cloud " /> SpringBoot</h1>
        </div>

        <Menu mode="inline" theme="dark"
          selectedKeys={[`${get(router, 'pathname')}`]}
          className="padding-top-lg"
        >
          <SubMenu key="sub1" title={<span><Icon type="user" />SpringBoot</span>}>
            <Menu.Item key="/user">
              <Link to="/user">集成MVC</Link>
            </Menu.Item>
            <Menu.Item key="/bill">
              <Link to="/bill">集成MyBatis</Link>
            </Menu.Item>
          </SubMenu>

        </Menu>;
      </div>
    );
  }
}
